<template>
  <div class="product-container">
    <div class="my-header">
      <i class="back"></i>
      <strong>商品列表</strong>
      <i></i>
    </div>
    <!-- 商品列表 -->
    <div class="content">
      <div class="tips" v-if="activity.notice!==''">
        <div class="icon"></div>
        <div style="padding-left:30px;line-height:20px;" v-if="activity.notice!==''" v-html="activity.notice"></div>
      </div>
      <ul class="product-list">
        <li class="product-item" @click="$router.push({path: '/product', query:{id: item.productId}})" v-for="(item,index) in proData"
          :key="index">
          <div class="item-posre">
            <img v-lazy="item.activityImg" alt="">
          </div>
          <div class="item-product-text">{{item.sellingPoints}}</div>
          <p class="original-price">吊牌价：&yen;<i>{{item.goodsPrice|formatMoney}}</i></p>
          <p class="item-product-info"> <span><i>&yen;</i>{{item.sharePrice|formatMoney}}</span>
            <button type="button" class="jx-btn" v-if="item.stockNum>0">立即购买</button>
            <button type="button" class="jx-btn none" v-else> 已售罄  </button>
          </p>
          <!--<div class="size">尺码：{{item.sizeName}}</div>-->
          <!--<div class="size">尺码：{{item.sizeName}}</div>-->
        </li>
      </ul>
      <div class="empty-info cart-tips" v-if="proData == '' && isDone">
        <p>活动已经下架了哦</p>
      </div>
    </div>
    <ServiceIcon></ServiceIcon>
    <!-- 商品列表 -->
    <mt-tabbar v-model="selected" :fixed="true">
      <mt-tab-item id="shop">
        <div @click="$router.go(0)">
          <div class="iconfont icon-dianpu"></div><span>商品</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="cart">
        <div @click="$router.push('/cart')">
          <div class="iconfont icon-cart"></div><span>购物车</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="home">
        <div @click="$router.push({name:'order',query:{tab:0}})">
          <div class="iconfont icon-dingdan"></div><span>订单</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
    <BackHead></BackHead>
  </div>
</template>

<script>
  import ServiceIcon from '@/components/common/serviceIcon'
  import BackHead from '@/components/common/backHead'
  import wxShare from '@/mixins/wechat'
  import {
    getProductList
  } from '@/api/shop'

  import {
    decryptString,
    setLocalStorage,
    encryptString,
    getLocalStorage
  } from '@/utils'
  export default {
    data() {
      return {
        selected: 'shop',
        proData: [],
        params: {},
        isDone: false,
        tips: false,
        activity: {
          notice: ''
        }
      }
    },
    components: {
      ServiceIcon,
      BackHead
    },
    computed: {},
    mixins: [wxShare],
    methods: {
      // 设置分享信息
      setShare(info) {
        const shareInfo = {
          title: info.labelName,
          desc: info.activeDoc,
          link: window.location.href,
          img: info.labelLogo
        }
        // mixins
        this.wechatShare(shareInfo)
      },
      fetchData() {
        // this.tips = true
        this.ActiveNo = this.$route.query.id
        if (this.ActiveNo) {
          // 替换所有的'-'
          const decryptStringStr = this.ActiveNo.replace(/\-/g, '+')
          // 解密
          const parseStr = decryptString(decryptStringStr)
          this.params = JSON.parse(decodeURIComponent(parseStr))
          // 活动

          setLocalStorage('activityId', this.params.activityId)
          setLocalStorage('sharebid', this.params.bid)
        } else {
          this.params.activityId = getLocalStorage('activityId')
          this.params.bid = getLocalStorage('sharebid')
        }
        getProductList({
          activityId: this.params.activityId
          //  activityId: '8b2322ad558e4c2db2e6eb8f14d628fa'
        }).then(res => {
          this.activity = res.data.activity
          this.proData = res.data.findGoodsList
          if (this.proData.length > 0) {
            this.proData.map(item => {
              const data = {
                goodsId: item.goodsId,
                activityId: item.activityId,
                bid: this.params.bid
              }
              // 加密
              const encryptStr = encryptString(JSON.stringify(data))
              item.productId = encryptStr.replace(/\+/g, '-')
            })
          } else {
            this.isDone = true
          }
          this.setShare(this.activity)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    activated: function() {
      // 修复keepalive tab不更新
      if (this.$route.name === 'shop') {
        this.selected = 'shop'
      }
    },
  
    mounted() {
      this.fetchData()
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .product-container {
    height: 100%;
    .content {
      padding-top: 1.25rem;
      padding-bottom: 2.25rem;
      /* 商品列表 */
      .tips {
        padding: 10px;
        background: #FFFEEB;
        color: #000;
        position: relative;
        .icon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background: url('~assets/common/images/laba.png') no-repeat center center;
          background-size: 100% 100%;
          position: absolute;
        }
        p {
          line-height: 20px;
          padding-left: 25px;
          display: inline-block;
        }
      }
      .product-list {
        background: #fff;
        padding-right: 10px;
        @include flexbox(space-between,
        center,
        row,
        wrap);
        overflow: hidden;
        clear: both;
        .product-item {
          background: #fff;
          padding-left: 10px;
          padding-top: 10px;
          flex: 0 0 50%;
            -webkit-flex: 0 0 50%; //  margin: .15rem;
          .item-posre {
            position: relative;
            text-align: center;
            img {
              max-height: 185px;
              max-width: 100%;
            } // &:after {
            //    display: block;
            //    position: absolute;
            //    content: '';
            //    width: 100%;
            //    height: 23px;
            //    bottom: 0;
            //    background-color: #333333;
            //    opacity: 0.5;
            // }
            // &:before {
            //    display: block;
            //    position: absolute;
            //    content: '失效';
            //    width: 100%;
            //    bottom: 0;
            //    z-index: 100;
            //    color:#ffffff;
            //    line-height: 23px;
            // }
          }
          .item-product-text {
            margin: .1rem 0 0 .1rem;
            font-size: 14px;
            line-height: 20px;
            height: 40px; // overflow: hidden;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical; 
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-box-orient:vertical;
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 2; 
            @include textoverflow(2);
          }
          .size {
            white-space: normal;
            word-break: break-all;
            @include textoverflow(1);
          }
          .item-product-info {
            @include flexbox(space-between,
            center,
            row,
            wrap);
            color: #f23030;
            padding: 0 0 .2rem .1rem;
            font-size: 16px;
            span {
              i {
                font-size: 12px;
                margin-right: .1rem;
              }
            }
            .jx-btn {
              color: #ffffff;
              font-size: 13px;
              background: #f23030;
              border: 1px solid #f23030!important;
              padding: 0.1rem 0.2rem;
              @include radius(3px)
            }
            .none {
              background: #ddd;
              border: 1px solid #999!important;
            }
          }
          .original-price {
            i {
              text-decoration: line-through;
            }
            padding: .2rem .1rem .1rem .1rem;
            font-size: 12px;
            color: #999;
          }
        }
      }
      .cart-tips {
        margin-top: 40px;
        position: relative;
        z-index: 1;
        padding: $padding 25px;
        @include flexbox(flex-start,
        center,
        column,
        nowrap);
        p {
          font-size: 14px;
          color: #999;
          line-height: 2;
        }
      }
      /* 商品列表 */
    }
  }

</style>
